<template>
	<view>
		<!-- 用户信息 开始 -->
		<view class="user_info">
			<view class="user_icon">
				<image :src="user.avatar" mode="widthFix"></image>
			</view>
			<view class="user_desc">
				<view class="user_name">{{user.name}}</view>
				<!-- 距今时间 -->
				<view class="user_time">{{untilNow}}</view>
			</view>
		</view>
		<!-- 用户信息 结束 -->

		<!-- 高清大图 开始 -->
		<view class="high_img">
			<swiper-action @swiperAction="handleSwiperAction">
				<image mode="widthFix" :src="imgDetail.thumb"></image>
			</swiper-action>
		</view>
		<!-- 高清大图 结束 -->
		<!-- 点赞收藏 开始 -->
		<view class="user_rank">
			<view class="rank">
				<text class="iconfont icon-dianzan">{{imgDetail.rank}}</text>
			</view>
			<view class="user_collect">
				<text class="iconfont icon-jushoucang">收藏</text>
			</view>
		</view>
		<!-- 点赞收藏 结束 -->

		<!-- 专辑 开始 -->
		<view class="album_wrap" v-if="album.length>0">
			<view>有专辑数据，需要重新编写代码</view>
		</view>
		<!-- 专辑 结束 -->

		<!-- 最热评论 开始 -->
		<view v-if="hot.length>0" class="comment hot">
			<view class="comment_title">
				<text class="iconfont  icon-hotfill"></text>
				<text class="comment_text">最热评论</text>
			</view>
			<view class="comment_list">
				<view class="comment_item" v-for="item in hot" :key="item.id">
					<!-- 评论用户信息(头像 名称) -->
					<view class="comment_user">
						<!-- 用户头像 -->
						<view class="user_icon">
							<image mode="widthFix" :src="item.user.avatar"></image>
						</view>
						<!-- 用户姓名和发布日期 -->
						<view class="user_name">
							<view class="user_nickname">{{item.user.name}}</view>
							<view class="user_time">{{getPublishTime(item.atime)}}</view>
						</view>
						<!-- 用户徽章 -->
						<view class="user_badge">
							<image v-for="item2 in item.user.title" :key="item2.icon" :src="item2.icon"></image>
						</view>
					</view>
					<!-- 评论数据 -->
					<view class="comment_desc">
						<view class="comment_content">{{item.content}}</view>
						<view class="comment_like">
							<view class="iconfont icon-dianzan">{{item.size}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 最热评论 结束 -->

		<!-- 最新评论 开始 -->
		<view v-if="comment.length>0" class="comment new" :class="{hasNewTop:hot.length>0}">
			<view class="comment_title">
				<text class="iconfont  icon-icon-pinglun"></text>
				<text class="comment_text">最新评论</text>
			</view>
			<view class="comment_list">
				<view class="comment_item" v-for="item in comment" :key="item.id">
					<!-- 评论用户信息(头像 名称) -->
					<view class="comment_user">
						<!-- 用户头像 -->
						<view class="user_icon">
							<image mode="widthFix" :src="item.user.avatar"></image>
						</view>
						<!-- 用户姓名和发布日期 -->
						<view class="user_name">
							<view class="user_nickname">{{item.user.name}}</view>
							<view class="user_time">{{getPublishTime(item.atime)}}</view>
						</view>
						<!-- 用户徽章 -->
						<view class="user_badge">
							<image v-for="item2 in item.user.title" :key="item2.icon" :src="item2.icon"></image>
						</view>
					</view>
					<!-- 评论数据 -->
					<view class="comment_desc">
						<view class="comment_content">{{item.content}}</view>
						<view class="comment_like">
							<view class="iconfont icon-dianzan">{{item.size}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 最新评论 结束 -->
		
		<!-- 下载 开始 -->
		<view class="download">
			<view class="download_btn" @click="handleDownload">下载图片</view>
		</view>
		<!-- 下载 结束 -->
	</view>
</template>

<script>
	import getTimeUntilNow from '@/utils/getTimeUntilNow.js'
	import swiperAction from '@/components/swiperAction.vue'
	export default {
		components:{
			swiperAction
		},
		data() {
			return {
				// 用户信息(假数据)
				user: {
					avatar: "http://img0.adesk.com/download/5c94c22831f6136a1c2b5d9e",
					name: "蛋蛋君"
				},
				// 图片信息对象 包含用户头像
				imgDetail: {},
				// 距今时间
				untilNow: "",
				// 专辑数据
				album: [],
				// 评论
				comment: [],
				// 最热评论
				hot: [],
				// 图片的索引
				imgIndex:0
			}
		},
		onLoad() {
			// console.log(getApp().globalData);
			// 获取当前点击图片所在数据和索引
			const {imgIndex} = getApp().globalData;
			this.imgIndex=imgIndex;
			this.getData();
		},
		methods: {
			// 点击下载
			async handleDownload(){
				// h5的情况下预览大图
				// #ifdef H5
				wx.previewImage({
					urls:[this.imgDetail.img]
				})
				// #endif
				
				// 不是h5的情况下就下载图片
				// #ifndef H5
				uni.downloadFile
				uni.saveImageToPhotosAlbum
				
				await uni.showLoading({
					title:"下载中"
				})
				// 1	将远程文件下载到小程序的内存中
				const result1= await uni.downloadFile({url:this.imgDetail.img})
				const {tempFilePath}=result1[1];
				// 2 将小程序内存中的临时文件下载到本地上
				const result2=await uni.saveImageToPhotosAlbum({
					// 下载文件路径
				filePath:tempFilePath})
				// 隐藏弹框
				uni.hideLoading();
				if(result2.length===1){
				// 3 根据判断提示用户下载取消
					uni.showToast({
						title:"取消下载",
						icon:"error"
					})
				}else if(result2.length===2){
					uni.showToast({
						title:"下载成功"
					})
				}
				// #endif
			},
			// 给当前页面赋值‘
			getData(){
				const {imgList} = getApp().globalData;
				// 获取当前图片的信息
				this.imgDetail = imgList[this.imgIndex]
				// 用untilNow接收距今时间
				this.untilNow = getTimeUntilNow(this.imgDetail.atime);
				
				// 获取图片详情的id
				// this.imgDetail.id
				// 发送id请求数据
				this.getComments(this.imgDetail.id)
			},
			getPublishTime(atime){
				return getTimeUntilNow(atime)
			},
			// 滑动事件
			handleSwiperAction(e){
				// 左滑 imgIndex++
				// 右滑 imgIndex--
				// 判断数组越界问题
				const {imgList} = getApp().globalData;
				if(e.direction==="left"&&this.imgIndex<imgList.length-1){
					// 可以进行左滑加载下一页
					this.imgIndex++;
					this.getData()
				}else if(e.direction==="right" && this.imgIndex>0){
					// 右滑加载上一页
					this.imgIndex--;
					this.getData()
				}else{
					uni.showToast({
						title:"没有数据了",
						icon:"none"
					})
				}
			},
			getComments(id) {
				this.request({
					url: `/v2/wallpaper/wallpaper/${id}/comment`
				}).then(result => {
					console.log(result);
					this.album = result.res.ablum ? result.res.ablum : [],
					this.comment = result.res.comment ? result.res.comment : []
					this.hot = result.res.hot ? result.res.hot : []
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.high_img{
		image{
			border-bottom: 1rpx solid #eee;
		}
	}
	.user_info {
		display: flex;
		padding: 30rpx;

		.user_icon {
			padding: 0 20rpx;

			image {
				width: 88rpx;
				border-radius: 50%;
			}
		}

		.user_desc {
			.user_name {
				color: #000;
				font-weight: 600;
			}

			.user_time {
				color: #ccc;
				font-size: 24rpx;
				padding: 10rpx 0;
			}
		}
	}

	.user_rank {
		display: flex;
		height: 80rpx;
		font-size: 20rpx;
		border-bottom: 5rpx solid #eee;

		.rank {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: 32rpx;
			}
		}

		.user_collect {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: 32rpx;
			}
		}
	}

	.comment {
		.comment_title {
			padding: 15rpx;

			.iconfont {
				color: red;
				font-size: 40rpx;
			}

			.comment_text {
				font-weight: 600;
				font-size: 28rpx;
				color: #666;
				margin-left: 10rpx;
			}
		}

		.comment_list {
			.comment_item {
				border-bottom: 10rpx solid #eee;

				// 用户信息
				.comment_user {
					display: flex;
					padding: 25rpx 0;

					// 头像
					.user_icon {
						width: 15%;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 90%;
						}
					}

					// 名称
					.user_name {
						margin-left: 10rpx;
						flex: 1;

						.user_nickname {
							color: #777;
						}

						.user_time {
							color: #ccc;
							font-size: 24rpx;
							padding: 5rpx 0;
						}
					}

					// 徽章
					.user_badge {
						display: flex;
						margin-right: 10rpx;
						image {
							padding: 2rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				// 评论数据
				.comment_desc {
					padding: 15rpx 0 30rpx 0;
					display: flex;

					.comment_content {
						margin-left: 15%;
						flex: 1;
						color: #000;
						font-weight: 600;
					}

					.comment_like {
						text-align: right;
						margin-right: 10rpx;

						.iconfont {
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}

	// 最新评论
	.new {
		.icon-icon-pinglun {
			color: blue !important;
		}
	}
	.hasNewTop{
		border-top: 40rpx solid #eee;
	}
	// 下载
	.download{
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.download_btn{
			width: 98%;
			height: 83%;
			background-color: $color;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 14rpx;
		}
	}
</style>
